// hook  组合式函数 钩子 => 将来想要用什么功能, 你只需要use一个函数就能完成对应的功能

import { ref, onMounted, onUnmounted } from 'vue'
import { useIntersectionObserver, useIntervalFn } from '@vueuse/core'

export function useLazyData(apiFn: () => void) {
  const target = ref(null)
  // 等组件进入可视区后, 才发请求
  // useIntersectionObserver 可以控制监控的元素进入可视区的面积/整体面积的比例   0.1(默认值)
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }]) => {
      if (isIntersecting) {
        stop()
        apiFn()
      }
    },
    {
      threshold: 0, // 一旦监控元素进入可视区, 哪怕是一点, 立即触发回调
    }
  )

  // 函数内的数据如果函数外部想用 需要return
  return target
}

// 我们自己封装的一个组合式函数, 用于获取滚动距离  use开头
export function useHmScrollY() {
  // --------------------------------------------------------------
  // 准备数据 存储滚动距离
  const y = ref(0)

  // window注册scroll事件(全局), 需要在组件卸载时 移除
  // created  =>  setup
  // mounted  =>  onMounted
  const onScroll = () => {
    // console.log('滚动了...', document.documentElement.scrollTop)
    y.value = document.documentElement.scrollTop
  }

  onMounted(() => {
    window.addEventListener('scroll', onScroll)
  })

  // destroyed => onUnmounted
  onUnmounted(() => {
    window.removeEventListener('scroll', onScroll)
  })
  // ------------------------------------------------------------
  return y
}

// 封装一个用于倒计时的逻辑
export function useCountDown(count: number = 60) {
  // 准备一个时间数据, 初始值是0, 具体倒计时多久 取决于你当下的业务
  const time = ref(0)

  // 测试
  // useIntervalFn 更易于将来封装抽离倒计时的业务 + 不用维护定时器id
  // resume 开启定时
  // pause  结束定时
  const { pause, resume } = useIntervalFn(
    () => {
      // console.log('hahah')
      time.value--

      if (time.value <= 0) {
        pause()
      }
    },
    1000,
    {
      immediate: false, // 不再立即触发
    }
  )

  const start = () => {
    // 1. 需要根据业务去初始化倒计时的秒数
    time.value = count
    // 2. 开启定时器, time--
    resume()
  }

  return {
    time,
    start,
  }
}
